<template>
  <el-container>
    <div class="c1">
     
      <el-form :inline="true" :model="searchData" class="demo-form-inline s1">
        <el-form-item class="inpcon">
          <el-input
            v-model="searchData.belong"
            style="margin-right: 5px"
            placeholder="输入'归属'查询"
          ></el-input>
          <el-input
            v-model="searchData.keyword"
            style="margin-right: 5px"
            placeholder="输入'关键字'查询"
          ></el-input>
          <el-input
            v-model="searchData.status"
            style="margin-right: 5px"
            placeholder="输入'说明'查询"
          ></el-input>
        </el-form-item>
   
        <el-form-item>
          <el-button  size="mini"
            type="success"
            icon="el-icon-search" @click="searchBtn(searchData)">查询</el-button>
        </el-form-item>
             <el-form-item>
          <el-button  size="mini"
            type="warning"
            icon="el-icon-refresh-left" @click="searchrestBtn(searchData)"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div>
        <el-button  size="mini"
        type="primary"
        icon="el-icon-plus"  @click="addmenu">新增</el-button>
         <el-button
          :loading="downloadLoading"
          size="mini"
           class="dBtn"
          type="warning"
          icon="el-icon-download"
          @click="download">导出</el-button>
     </div>
    </div>

    <el-card class="c2">
      <!-- <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" style="margin-bottom: 10px"></el-col>
        <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14"></el-col>

      </el-row> -->
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="400"
        align="center"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>

        <el-table-column prop="belong" label="归属"> </el-table-column>
        <el-table-column prop="keyword" label="关键字"> </el-table-column>
        <el-table-column prop="param" label="参数"> </el-table-column>
        <el-table-column prop="state" label="说明"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button  size="mini"
              type="primary"
              icon="el-icon-edit" @click="handleEdit(scope.row)"
              ></el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete(scope.row.id)"
              ></el-button
            >
          </template>
        </el-table-column>
      </el-table>
      </el-card>
    <el-footer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pageNum.currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="this.pageNum.perPage_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.pageNum.total"
      >
      </el-pagination>
    </el-footer>
    <!-- 新增菜单对话框 start -->

    <el-dialog
      title="字典新增"
      :visible.sync="addmenuDialogVisible"
      width="50%"
      
    >
      <el-form
       class="editform"
        label-position="left"
        label-width="80px"
        :model="addData"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="归属" prop="belong">
          <el-input v-model="addData.belong"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="addData.keyword"></el-input>
        </el-form-item>
        <el-form-item label="参数" prop="param">
          <el-input v-model="addData.param"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="state">
          <el-input v-model="addData.state"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input v-model="addData.status"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addmenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addmenuDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增菜单对话框 end -->

    <!-- 删除 -->
    <el-dialog
      title="提示"
      :visible.sync="delmenuDialogVisible"
      width="30%"
     
    >
      确认删除吗?
      <span slot="footer" class="dialog-footer">
        <el-button @click="delmenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delmenuDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="提示"
      :visible.sync="editmenuDialogVisible"
      width="50%"
      
    >
          <el-form
       class="editform"
        label-position="left"
        label-width="80px"
        :model="editDate"
        :rules="rules"
        ref="ruleForm2"
      >
        <el-form-item label="归属" prop="belong">
          <el-input v-model="editDate.belong"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="editDate.keyword"></el-input>
        </el-form-item>
        <el-form-item label="参数" prop="param">
          <el-input v-model="editDate.param"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="state">
          <el-input v-model="editDate.state"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input v-model="editDate.status"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editmenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editmenuDialog">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from "../../utils/axios";

export default {
  methods: {
    //查询菜单
    getDictList(con) {
      axios({
        method: "GET",
        url: "/sys/dictionaries",
        params: con,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.pageNum.current = res.data.current;
          this.pageNum.size = res.data.size;
          this.pageNum.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //页码
    handleSizeChange(val) {
      this.pageNum.size = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getDictList(this.searchData);
      } else {
        this.getDictList(this.pageNum);
      }
    },
    handleCurrentChange(val) {
      this.pageNum.current = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getDictList(this.searchData);
      } else {
        this.getDictList(this.pageNum);
      }
    },
    //添加
    addmenu() {
      this.addmenuDialogVisible = true;
    },
    addmenuDialog() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          axios({
            method: "POST",
            url: "/sys/dictionaries",
            data: JSON.stringify(this.addData),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.addmenuDialogVisible = false;
              this.getDictList(this.pageNum);
            } else {
              console.log(res);
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("内容不完整");
        }
      });
    },
    addmenuhandleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //查询
    searchBtn(con) {
      this.getDictList(con);
      this.searchToggle = true;
    },
        //导出
    download(){
      this.downloadLoading=true
    },
    //重置
    searchrestBtn(con) {
      this.searchData.belong = "";
      this.searchData.keyword = "";
      this.searchData.status = "";
      this.getDictList(con);
      this.searchToggle = false;
    },
    //删除
    handleDelete(con) {
      this.delmenuDialogVisible = true;

      this.delDate = [];
      this.delDate.push(con);
    },

    //删除对话框
    delmenuDialog() {
      axios({
        method: "delete",
        url: "/sys/role",

        data: JSON.stringify(this.delDate),
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.delmenuDialogVisible = false;
          this.getDictList(this.pageNum);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    delmenuhandleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //修改
    handleEdit(con) {
      this.editmenuDialogVisible = true;

      this.editDate.status = con.status;
      this.editDate.state = con.state;
      this.editDate.id = con.id;
      this.editDate.param = con.param;
      this.editDate.keyword = con.keyword;
      this.editDate.belong = con.belong;
    },
    editmenuDialog() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          axios({
            method: "PUT",
            url: "/sys/dictionaries",
            data: this.editDate,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.editmenuDialogVisible = false;
              this.getDictList(this.pageNum);
            } else {
              console.log(res);
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("内容不完整");
        }
      });
    },
    editmenuhandleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
  data() {
    return {
      pageNum: {
        current: 1,
        size: 10,
        total: 0,
      },
      addmenuDialogVisible: false,
      delmenuDialogVisible: false,
      editmenuDialogVisible: false,
      searchToggle: false,
         downloadLoading: false,
      delDate: [],
      searchData: {
        belong: "",
        keyword: "",
        status: "",
      },
      editDate: {
       belong: "",
        keyword: "",
        param: "",
        state: "",
        status: "",
      },
      tableData: [],
      addData: {
        belong: "",
        keyword: "",
        param: "",
        state: "",
        status: "",
      },
      rules: {
        param: [{ required: true, message: "必填", trigger: "blur" }],
        keyword: [{ required: true, message: "必填", trigger: "blur" }],
        
      },
    };
  },
  created() {
    this.getDictList(this.pageNum);
  },
};
</script>

<style scoped lang="less">

.el-container {
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;
}
.el-card {
  width: 100%;
}
.el-footer {
  align-self: start;
  margin-top: 1.5rem;
}

.btns {
  display: flex;
  justify-content: space-between;
}
.c1 {
   margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  width: 100%;
  min-height: 5rem;

}
.s1 {
  height: 0;
  
  display: flex;
  align-items: center;
  margin-left: -2rem;
}
.inpcon {
  display: flex;
  justify-content: space-around;
}
.inpcon .el-input {
  width: 30%;
  font-size: 12px;
}
.el-input /deep/.el-input__inner {
  height: 3.05rem;
}
.editform {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  text-align: left;

  .el-input /deep/.el-input__inner {
    height: 3.05rem;
    font-size: 12px !important;
  }
}
 .el-input /deep/.el-input__inner {
    height: 3.05rem;
    font-size: 12px !important;
  }
.editform /deep/ .el-form-item {
  display: inline-block;
  margin-left: 1rem;

  width: 48%;
}
.editform /deep/ .el-form-item__content {
  height: 3.05rem;
}
.el-table /deep/ {
  font-size: 12px;
  padding: 2rem 0 0 2rem;
}
.el-switch /deep/ .el-switch__label * {
  font-size: 12px;
}
.el-table /deep/ thead {
   font-size: 12.5px;
    color: #909399;
    font-weight: 700;
}
</style>